<!-- eslint-disable vue/no-v-html -->
<template>
  <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="0">
    <el-form-item prop="user_name">
      <el-input size="large" clearable v-model="ruleForm.user_name" placeholder="请输入用户名" type="text" autocomplete="off">
        <template #prepend><svg-icon name="user" /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="large" clearable v-model="ruleForm.password" placeholder="请输入密码" type="password" autocomplete="off" show-password>
        <template #prepend><svg-icon name="password" /></template>
      </el-input>
    </el-form-item>

    <el-form-item prop="captcha">
      <div class="flex items-center">
        <el-input size="large" clearable v-model="ruleForm.captcha" placeholder="请输入验证码" type="text" autocomplete="off">
          <template #prepend><svg-icon name="captcha" /></template>
        </el-input>
        <div class="login-captcha" v-html="codeHtml" @click="getCode"></div>
      </div>
    </el-form-item>
    <el-button class="w-[100%]" size="large" type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
  </el-form>
</template>

<script lang="ts" setup>
  import { onMounted, onUnmounted, reactive, ref, unref } from 'vue';
  import { FormInstance } from 'element-plus';
  import SvgIcon from '@/components/SvgIcon/index.vue';
  import { useI18n } from '@/hooks/useI18n';
  import { useUserStore } from '@/store/modules/user';
  import { formRules } from '@/utils/validators';
  import { useRouter } from 'vue-router';
  import { getCodeImg } from '@/api/login';

  const { t } = useI18n();
  const userStore = useUserStore();

  const router = useRouter();

  const ruleFormRef = ref<FormInstance>();

  const ruleForm = reactive({
    user_name: '',
    password: '',
    captcha: '',
  });

  const rules = reactive({
    user_name: [
      {
        validator: formRules.validUserName,
        trigger: 'blur',
      },
    ],
    password: [
      {
        validator: formRules.validPwd,
        trigger: 'blur',
      },
    ],
    captcha: [
      {
        validator: formRules.validCode,
        trigger: 'blur',
      },
    ],
  });

  // 获取验证码
  const codeHtml: any = ref();
  const getCode = () => {
    console.log(t('sys.lock.unlock'));
    return getCodeImg().then((res) => {
      codeHtml.value = res;
    });
  };

  const submitFn = async (valid: any) => {
    if (valid) {
      console.log('submit!');
      const params = unref(ruleForm);
      await userStore.Login(params);
      router.replace('/layout');
    } else {
      console.log('error submit!');
      return false;
    }
  };

  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate(submitFn);
  };

  const enterKey = (event: KeyboardEvent) => {
    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
      ruleFormRef.value?.validate(submitFn);
    }
  };

  onMounted(() => {
    window.addEventListener('keyup', enterKey);

    getCode();
  });

  onUnmounted(() => {
    window.removeEventListener('keyup', enterKey);
  });
</script>

<style lang="scss">
  .login-captcha {
    height: 40px;
    cursor: pointer;
    border: 1px solid #c0c4cc;
    margin-left: 15px;
    svg {
      height: 100%;
    }
  }
</style>
